<template>
  <div class="account-property-page">
    <div class="account-property-header">
      <div class="title">请选择登录平台：</div>
      <div class="content">
        <a-radio-group :options="platformOptions" :default-value="params.platFrom" />
      </div>
    </div>
    <div class="account-property-body">
      <div class="title">请选择登录账号：</div>
      <div class="content">
        <div>
          <a-radio-group v-model:value="params.platAccount">
            <a-radio
              :style="radioStyle"
              v-for="item in merchantOptions"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-radio>
          </a-radio-group>
        </div>
        <a-button type="link" @click="openAddAccount"> + 添加账号 </a-button>
      </div>
    </div>
    <div class="account-property-footer">
      <a-button type="primary" @click="submitAccount"> 确定 </a-button>
    </div>
    <div>
      <add-account-modal
        v-if="addAccountVisible"
        title="添加账号"
        :visible="addAccountVisible"
        @handleCancelModal="closAddAccountModal"
      ></add-account-modal>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { accountLogin } from "@/api/login";
import storage from "@/utils/storage";
import { CHANNEL_ENUM, generationOptions } from "@/utils/enums";
import AddAccountModal from "@/components/addAccountModal.vue";
import { message } from "ant-design-vue";
export default defineComponent({
  components: {
    AddAccountModal
  },
  setup() {
    const router = useRouter();
    const radioStyle = reactive({
      display: "block",
      height: "30px",
      lineHeight: "30px"
    });
    const platformOptions = generationOptions(CHANNEL_ENUM);

    const merchantOptions = [
      {
        label: "云积分运营-王朗",
        value: "云积分运营-王朗"
      }
    ];

    const addAccountVisible = ref<boolean>(false);
    const openAddAccount = () => {
      addAccountVisible.value = true;
    };
    const closAddAccountModal = () => {
      addAccountVisible.value = false;
    };

    console.log(storage.get("USER_ID"));
    const params = reactive({
      platAccount: "",
      platFrom: "AL",
      userId: storage.get("USER_ID")
    });
    const submitAccount = async () => {
      console.log(params);
      try {
        const { data } = await accountLogin({
          ...params
        });
        if (data) {
          storage.set("CHANNEL", data?.channel);
          storage.set("PLATACCOUNT", data?.PLATACCOUNT);
          storage.set("PLATACCOUNT_ID", data?.id);
          storage.set("COOKIE", data?.COOKIE);
          storage.set("ACCOUNT_INFO", data);
          router.push({ name: "AccountManagementList" });
        } else {
          message.error("账号异常");
        }
      } catch (e) {
        console.log(e);
      }
    };
    return {
      radioStyle,
      platformOptions,
      merchantOptions,
      params,
      submitAccount,
      addAccountVisible,
      openAddAccount,
      closAddAccountModal
    };
  }
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
